<template>
  <div>
    <h_header></h_header>
    <h_right></h_right>
    <!-- 主体开始 -->
    <div>
      <!-- 开头介绍模块部分 -->
      <div class="first">
        <div class="production">
          <h2>作品案列</h2>
          <div class="inlineBlue"></div>
          <p>用技术与专注，将作品通过艺术和技术的结合，打造精品案例。</p>
        </div>
      </div>
      <!-- nav区域 -->
      <div class="proNav">
        <a
          href="javascript:void(0);"
          @click="changed1"
          :class="c === '1' ? 'act' : ''"
          >网站建设</a
        >
        <a
          href="javascript:void(0);"
          @click="changed2"
          :class="c === '2' ? 'act' : ''"
          >营销传播</a
        >
        <a
          href="javascript:void(0);"
          @click="changed3"
          :class="c === '3' ? 'act' : ''"
          >形象策略</a
        >
        <a
          href="javascript:void(0);"
          @click="changed4"
          :class="c === '4' ? 'act' : ''"
          >影像大片</a
        >
      </div>
      <!-- 内容主体区 -->
      <div class="list1" v-if="c === '1'">
        <div class="first">
          <div class="product">
            <a href="javascript:void(0);" class="productImg" @click="goto(3)">
              <img src="../../assets/cases4.jpg" alt="" />
            </a>
            <div class="productTitle">
              计算机文化报名系统
              <span>
                <i>5697</i>
              </span>
            </div>
          </div>
        </div>
        <div class="page">
          <span>
            共
            <b>1</b>
            页
            <b>1</b>
            条记录
          </span>
        </div>
      </div>
      <div class="list2" v-if="c === '2'">
        <div class="first">
          <div class="product" v-for="item of list2" :key="item.index">
            <a href="javascript:void(0);" class="productImg" @click="goto(item.id)">
              <img :src="item.list2Img" alt="" />
            </a>
            <div class="productTitle">
              {{ item.list2Title }}
              <span>
                <i>{{ item.list2i }}</i>
              </span>
            </div>
          </div>
        </div>
        <div class="page">
          <span>
            共
            <b>1</b>
            页
            <b>2</b>
            条记录
          </span>
        </div>
      </div>
      <div class="list3" v-if="c === '3'">
        <div class="first">
          <div class="product" v-for="item of list3" :key="item.index">
            <a href="javascript:void(0);" class="productImg" @click="goto(item.id)">
              <img :src="item.list3Img" alt="" />
            </a>
            <div class="productTitle">
              {{ item.list3Title }}
              <span>
                <i>{{ item.list3i }}</i>
              </span>
            </div>
          </div>
        </div>
        <div class="page">
          <span>
            共
            <b>1</b>
            页
            <b>1</b>
            条记录
          </span>
        </div>
      </div>
      <div class="list4" v-if="c === '4'">
        <div class="first">
          <div class="product" v-for="item of list4" :key="item.index">
            <a href="javascript:void(0);" class="productImg">
              <img :src="item.list4Img" alt="" />
            </a>
            <div class="productTitle">
              {{ item.list4Title }}
              <span>
                <i>{{ item.list4i }}</i>
              </span>
            </div>
          </div>
        </div>
        <div class="page">
          <span>
            共
            <b>1</b>
            页
            <b>0</b>
            条记录
          </span>
        </div>
      </div>
    </div>
    <!-- 主体结束 -->
    <h_question></h_question>
    <h_footer></h_footer>
  </div>
</template>
<script>
import h_header from "@/components/header/header.vue";
import h_right from "@/components/right/right.vue";
import h_footer from "@/components/footer/footer.vue";
import h_question from "@/components/question/question.vue";
import { proContent } from '@/config/config.js'
export default {
  components: {
    h_header: h_header,
    h_right: h_right,
    h_footer: h_footer,
    h_question: h_question,
  },
  data() {
    return {
      c: "1",
      defaultC: "",
      list2: [
        {
          id: 1,
          list2Url: "",
          list2Img: require("../../assets/cases2.png"),
          list2Title: "GScloud云控平台",
          list2i: 8895,
        },
        {
          id: 2,
          list2Url: "",
          list2Img: require("../../assets/case3.jpg"),
          list2Title: "素绽雪电商服务平台",
          list2i: 9956,
        },
      ],
      list3: [
        {
          id: 0,
          list3Url: "",
          list3Img: require("../../assets/cases1.png"),
          list3Title: "钉钉报表小程序",
          list3i: 7345,
        },
      ],
      list4: [],
      proList:[],
      needList:[],
    };
  },
  created() {
    this.proList = proContent;
    console.log(this.proList)
    if (sessionStorage.getItem("c") === null) {
      window.sessionStorage.setItem("c", "1");
    }
  },
  mounted() {
    this.c = window.sessionStorage.getItem("c");
    // console.log(typeof this.c);
  },
  methods: {
    changed1() {
      this.c = "1";
      window.sessionStorage.setItem("c", this.c);
    },
    changed2() {
      this.c = "2";
      window.sessionStorage.setItem("c", this.c);
    },
    changed3() {
      this.c = "3";
      window.sessionStorage.setItem("c", this.c);
    },
    changed4() {
      this.c = "4";
      window.sessionStorage.setItem("c", this.c);
    },
    goto(index) {
      this.$router.push({path: '/ProductionList/' + index })
      this.needList = this.proList[index];
      // console.log(this.needList)
      window.sessionStorage.setItem('needList',JSON.stringify(this.needList))
    }
  },
};
</script>
<style lang="scss">
.production {
  background: url(../../assets/case/h-top-3.jpg);
}
.proNav {
  width: 450px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  a {
    height: 35px;
    display: block;
    line-height: 35px;
    color: #666666;
    width: 80px;
    text-align: center;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    &:hover {
      background: #0595c7;
      color: #fff;
    }
  }
}
.act {
  background: #0595c7;
  color: #fff !important;
}

// productList
.list1,
.list2,
.list3,
.list4 {
  background: #f1f1f1;
  box-sizing: border-box;
  padding: 50px 200px;
  padding-bottom: 0;
  overflow: auto;
  .first {
    overflow: auto;
    display: flex;
    .product {
      width: 27%;
      margin-right: 45px;
      box-sizing: border-box;
      height: 300px;
      .productImg {
        text-decoration: none;
        display: block;
        overflow: hidden;
        img {
          width: 100%;
          height: 200px;
          display: block;
          transition: ease-in-out 0.5s;
          &:hover {
            transform: scale(1.2);
          }
        }
      }
      .productTitle {
        height: 40px;
        background: white;
        line-height: 30px;
        padding: 5px 10px;
        box-sizing: border-box;
        font-size: 14px;
        color: #aaaaaa;
        display: flex;
        justify-content: space-between;
        span {
          padding-left: 20px;
          background: url(../../assets/case/see.png) no-repeat left;
          i {
            font-style: italic;
          }
        }
      }
    }
  }
}
</style>